<template>
  <div>
    <el-form
        size="mini"
        label-width="125px"
        ref="form"
        inline
        :rules="rules"
        :model="formData"
    >
      <el-form-item
          :label="item.lable"
          :class="item.lableLength > 8 ? 'changeLHight' : ''"
          :key="index"
          :prop="item.key"
          v-for="(item, index) in list"
      >
        <!--输入框-->
        <el-input
            v-if="item.type == 0"
            :prop="item.key"
            v-model="formData[item.key]"
            class="inputWidth"
            :style="'width: '+item.gs+';'"
            :placeholder="'请输入' + item.lable"
            :id="module + '' + item.keyupsxh"
            :keyupsxh="item.keyupsxh"
            @keyup.enter.native="enterkeyup(item.keyupsxh)"
            :type="item.columntype"
            min="0"
            :disabled="item.is_readonly"
            @input="forceUpdate"
        ></el-input>

        <!--日期框-->
        <el-date-picker
            v-if="item.type == 1"
            :prop="item.key"
            v-model="formData[item.key]"
            type="date"
            :placeholder="'请输入' + item.lable"
            value-format="yyyy-MM-dd"
            class="inputWidth"
            :style="'width: '+item.gs+';'"
            :id="module + '' + item.keyupsxh"
            :keyupsxh="item.keyupsxh"
            @keyup.enter.native="enterkeyup(item.keyupsxh)"
            :disabled="item.is_readonly"
            @blur="forceUpdate"
        >
        </el-date-picker>

        <!--时分秒日期框-->
        <el-date-picker
            :prop="item.key"
            v-if="item.type == 5"
            v-model="formData[item.key]"
            type="datetime"
            :placeholder="'请输入' + item.lable"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="dateInputWidth"
            :style="'width: '+item.gs+';'"
            :id="module + '' + item.keyupsxh"
            :keyupsxh="item.keyupsxh"
            @keyup.enter.native="enterkeyup(item.keyupsxh)"
            :disabled="item.is_readonly"
            @blur="forceUpdate"
        >
        </el-date-picker>

        <!--下拉框-->
        <el-select
            :prop="item.key"
            v-else-if="item.type == 6"
            filterable
            class="inputWidth"
            :style="'width: '+item.gs+';'"
            v-model="formData[item.key]"
            :placeholder="'请选择' + item.lable"
            :id="module + '' + item.keyupsxh"
            :keyupsxh="item.keyupsxh"
            @keyup.enter.native="enterkeyup(item.keyupsxh)"
            :disabled="item.is_readonly"
            @change="forceUpdate"
        >
          <el-option
              v-for="item2 in item.searchTypeForSelectDtos"
              :key="item2.value"
              :label="item2.showValue"
              :value="item2.value"
          ></el-option>
        </el-select>

        <!--下拉框-->
        <el-select
            :prop="item.key"
            v-else-if="item.type == 8"
            class="inputWidth"
            :style="'width: '+item.gs+';'"
            filterable
            v-model="formData[item.key]"
            :placeholder="'请选择' + item.lable"
            :id="module + '' + item.keyupsxh"
            :keyupsxh="item.keyupsxh"
            @keyup.enter.native="enterkeyup(item.keyupsxh)"
            :disabled="item.is_readonly"
            @change="forceUpdate"
        >
          <el-option
              v-for="item2 in item.searchTypeForSelectDtos"
              :key="item2.value"
              :label="item2.showValue"
              :value="item2.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
module.exports = {
  name: 'KaimoInfo',
  props: ["tableid", "module"],
  data () {
    return {
      entrySequence: 1, //初始化第一个输入框获取焦点
      list: [], //表单的字段集合
      formData: {}, //用户输入的数据
      rules: {}, //字段验证规则
    };
  },
  created() {
    this.getData();
    this.fieldValidationRules();
  },
  methods: {
    async getData() {
      let res = await api.post(
          "/admin/api/system/SystemCommonBusinessController/getInputDisplayFields",
          { id: this.tableid, module: this.module }
      );
      this.list = res.data;
    },
    async fieldValidationRules() {
      let res = await api.post(
          "/admin/api/system/SystemCommonBusinessController/fieldValidationRules",
          { id: this.tableid, module: this.module }
      );
      this.rules = res.data;
      // 身份证输入框验证规则
      var validatePerId = (rule, value, callback) => {
        let sex = 0;
        let birthday = "";
        let yyyy = "";
        let MM = "";
        let dd = "";
        if (value === "" || value == undefined) {
          callback(new Error("请输入身份证号码"));
        } else {
          // 判断身份证是否合法
          if (
              value.length == 18 &&
              /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
                  value
              )
          ) {
            sex = parseInt(value.substr(16, 1));
            birthday = value.substr(6, 8);
            callback();
          } else if (
              value.length == 15 &&
              /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/.test(
                  value
              )
          ) {
            sex = parseInt(value.substr(14, 1));
            callback();
          } else {
            callback(new Error("身份证格式不正确"));
          }
          //获取性别
          if (sex % 2 == 1) {
            this.formData.aac004 = "1";
            console.log(this.formData);
          } else {
            this.formData.aac004 = "2";
          }
          yyyy = birthday.substr(0, 4);
          MM = birthday.substr(4, 2);
          dd = birthday.substr(6, 2);
          this.formData.aac006 = yyyy + "-" + MM + "-" + dd;
          this.forceUpdate();//强制更新数据
        }
      };
      this.rules.aac002 = [{ validator: validatePerId, trigger: "blur" }];
    },
    huiche() {
      //回车事件
      let doc = document.getElementById(this.module + "" + this.entrySequence);
      if (doc == null) {
        this.entrySequence = 1;
        this.huiche(this.entrySequence);
      } else {
        doc.focus();
      }
    },
    enterkeyup(number) {
      // console.log(number);
      number++;
      this.entrySequence = number;
      this.huiche();
    },
    forceUpdate() {
      this.$forceUpdate(); //强制更新数据
    },
  },
  watch: {
    list: function () {
      //表单初始化完成后执行定位到第一个输入框
      this.$nextTick(function () {
        console.log(this.module + "" + this.entrySequence);
        let doc = document.getElementById(
            this.module + "" + this.entrySequence
        );
        // doc.focus();
      });
    },
  },
};
</script>

<style scoped>

</style>
